<template>
  <div class="demo">
    <div class="demo-title">基本用法</div>
    <div class="demo-content">
      <Transfer
        v-model:target-keys="targetKeys"
        v-model:selected-keys="selectedKeys"
        :data-source="mockData"
        :titles="['Source', 'Target']"
        :render="(item) => item.title"
        :disabled="disabled"
        @change="handleChange"
        @select-change="handleSelectChange"
        @scroll="handleScroll"
      />
      <Switch
        v-model:checked="disabled"
        un-checked-children="enabled"
        checked-children="disabled"
        style="margin-top: 16px"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Switch from '@sscd/switch';
  import Transfer from '@sscd/transfer';
  interface MockData {
    key: string;
    title: string;
    description: string;
    disabled: boolean;
  }
  const mockData: MockData[] = [];
  for (let i = 0; i < 20; i++) {
    mockData.push({
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
      disabled: i % 3 < 1,
    });
  }
  const oriTargetKeys = mockData.filter((item) => +item.key % 3 > 1).map((item) => item.key);
  const disabled = ref<boolean>(false);
  const targetKeys = ref<string[]>(oriTargetKeys);
  const selectedKeys = ref<string[]>(['1', '4']);
  const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
    console.log('targetKeys: ', nextTargetKeys);
    console.log('direction: ', direction);
    console.log('moveKeys: ', moveKeys);
  };
  const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
    console.log('sourceSelectedKeys: ', sourceSelectedKeys);
    console.log('targetSelectedKeys: ', targetSelectedKeys);
  };
  const handleScroll = (direction: string, e: Event) => {
    console.log('direction:', direction);
    console.log('target:', e.target);
  };
</script>
